<template>
  <div>
    <!--面包屑导航区-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据统计</el-breadcrumb-item>
      <el-breadcrumb-item>数据报表</el-breadcrumb-item>
    </el-breadcrumb>
    <!--卡片视图区域-->
    <el-card>
      <!-- 2.为ECharts准备一个具备大小（宽高）的Dom -->
      <div id="main" style="width: 1366px;height:768px;"></div>
    </el-card>
  </div>
</template>

<script>
// 1.导入 echarts
import echarts from 'echarts'
export default {
  data() {
    return {
      data: [],
      name: [],
      dataDTO: {}
    }
  },
  created() {},
  // (页面)dom上的元素已经被渲染完毕！
  async mounted() {
    // 3.基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'))
    const result = await this.$http.get('/order/getCount')
    if (result.data.code !== 200) {
      return this.$message.error('获取数据失败')
    }
    this.dataDTO = result.data.data
    for (var i = 0; i < this.dataDTO.nameList.length; i++) {
      this.data.push(this.dataDTO.countList[i])
      this.name.push(this.dataDTO.nameList[i])
    }
    // 4.准备数据和配置项
    var option = {
      title: {
        text: '巴黎公社 捐兵支援'
      },
      tooltip: {},
      legend: {
        data: ['请求支援(次)']
      },
      xAxis: {
        data: this.name,
        axisLabel: {
          // 该属性设置成0则表示强制显示所有标签，设置为1的话，隔一个标签显示一个标签
          interval: 0,
          // 代表X轴文字逆时针旋转45度
          rotate: 45
        }
      },
      yAxis: {},
      series: [{
        name: '次数',
        type: 'bar',
        data: this.data,
        itemStyle: {
          normal: {
            // 1.柱状图颜色处理
            color: function (params) {
              // 2.注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
              var colorList = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3']
              // 3.如果希望自动循环已经有的颜色循环显示，可以添加一个判断[给大于颜色数量的柱体添加循环颜色的判断]
              var index
              if (params.dataIndex >= colorList.length) {
                index = params.dataIndex - colorList.length
                return colorList[index]
              }
              return colorList[params.dataIndex]
            }
          }
        }
      }]
    }
    // 5.(展示数据)使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)
  },
  methods: {}
}
</script>

<style lang="less" scoped>

</style>
